<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script src="https://mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.127/dist/mapvgl.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/jquery-2.1.0.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <button onclick="getLocation()">点击</button>
    <script>
        var map = initMap({
            tilt: 60,
            heading: 0,
            center: [116.403748, 39.915055],
            zoom: 18,
            style: whiteStyle,
            skyColors: [
                // 地面颜色
                'rgba(226, 237, 248, 0)',
                // 天空颜色
                'rgba(186, 211, 252, 1)'
            ]
        });

        var data = [{
                geometry: {
                    type: 'Point',
                    coordinates: [116.403748, 39.915055]
                }
            },
            {
                geometry: {
                    type: 'Point',
                    coordinates: [116.403748, 49.915055]
                }
            }
        ];
        var view = new mapvgl.View({
            map: map
        });


        var layer = new mapvgl.IconLayer({
            width: 100 / 4,
            height: 153 / 4,
            offset: [0, -153 / 8],
            opacity: 0.8,
            icon: 'https://img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico',
            enablePicked: true, // 是否可以拾取
            selectedIndex: -1, // 选中项
            selectedColor: '#ff0000', // 选中项颜色
            autoSelect: true, // 根据鼠标位置来自动设置选中项
            onClick: (e) => { // 点击事件
                console.log('click', e);
            },
            onDblClick: e => {
                console.log('double click', e);

            },
            onRightClick: e => {
                console.log('right click', e);
            }
        });
        view.addLayer(layer);
        layer.setData(data);
        map.setDefaultCursor('default');
    </script>
</body>

</html>